<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="theme-color" content="#0078E7"><meta name="author" content="爱肖彤真是太好了"><meta name="copyright" content="爱肖彤真是太好了"><meta name="generator" content="Hexo 5.1.1"><meta name="theme" content="hexo-theme-yun"><title>Typescript入门，基本数据类型 | 工藤旧二の博客</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@900&amp;display=swap" media="none" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/star-markdown-css@0.1.19/dist/yun/yun-markdown.min.css"><script src="//at.alicdn.com/t/font_1140697_stqaphw3j4.js" async></script><script src="https://cdn.jsdelivr.net/npm/scrollreveal/dist/scrollreveal.min.js" defer></script><script>document.addEventListener("DOMContentLoaded", () => {
  [".post-card",".post-content img"].forEach((target)=> {
    ScrollReveal().reveal(target);
  })
});
</script><link rel="shortcut icon" type="image/svg+xml" href="/task/yun.ico"><link rel="mask-icon" href="/task/yun.ico" color="#0078E7"><link rel="alternate icon" href="/yun.ico"><link rel="preload" href="/task/css/hexo-theme-yun.css" as="style"><link rel="preload" href="/task/js/utils.js" as="script"><link rel="preload" href="/task/js/hexo-theme-yun.js" as="script"><link rel="prefetch" href="/task/js/sidebar.js" as="script"><link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin><link rel="stylesheet" href="/task/css/hexo-theme-yun.css"><link rel="alternate" href="/task/atom.xml" title="工藤旧二の博客" type="application/atom+xml"><script id="yun-config">
    const Yun = window.Yun || {};
    window.CONFIG = {"root":"/task/","title":"工藤旧二の博客","version":"0.9.7","anonymous_image":"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg","say":{"api":"https://v1.hitokoto.cn","hitokoto":true},"local_search":{"path":"/task/search.xml"},"fireworks":{"colors":["102, 167, 221","62, 131, 225","33, 78, 194"]}};
  </script><script>(function(){
  var bp = document.createElement('script');
  var curProtocol = window.location.protocol.split(':')[0];
  if (curProtocol === 'https') {
    bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
  }
  else {
    bp.src = 'http://push.zhanzhang.baidu.com/push.js';
  }
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(bp, s);
})();</script><meta name="description" content="1 基本介绍ts是js的超集，是目前前端必备的基础，包含了es5，es6的语法 也可以集成到vue中 安装：cnpm install -g typescript 查看版本：tsc -v 语言类型：静态弱类型 无法直接在浏览器运行，需要编译成js代码 2 基本使用2.1 如何配置自动编译使用idev：vscode 在vscode中在项目下cmd窗口输入tsc --init就会自动生成一个.json的">
<meta property="og:type" content="article">
<meta property="og:title" content="Typescript入门，基本数据类型">
<meta property="og:url" content="http://huang_zhao.gitee.io/task/2020/09/13/%E5%89%8D%E7%AB%AF/Typescript%E5%85%A5%E9%97%A8%EF%BC%8C%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/index.html">
<meta property="og:site_name" content="工藤旧二の博客">
<meta property="og:description" content="1 基本介绍ts是js的超集，是目前前端必备的基础，包含了es5，es6的语法 也可以集成到vue中 安装：cnpm install -g typescript 查看版本：tsc -v 语言类型：静态弱类型 无法直接在浏览器运行，需要编译成js代码 2 基本使用2.1 如何配置自动编译使用idev：vscode 在vscode中在项目下cmd窗口输入tsc --init就会自动生成一个.json的">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-09-13T14:47:11.000Z">
<meta property="article:modified_time" content="2020-09-14T13:59:43.000Z">
<meta property="article:author" content="爱肖彤真是太好了">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="ts">
<meta property="article:tag" content="ts基础">
<meta name="twitter:card" content="summary"><script src="/task/js/ui/mode.js"></script><link rel="stylesheet" href="/task/css/prism.css" type="text/css"></head><body><script defer src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script defer src="/task/js/ui/fireworks.js"></script><canvas class="fireworks"></canvas><div class="container"><a class="sidebar-toggle hty-icon-button" id="menu-btn"><div class="hamburger hamburger--spin" type="button"><span class="hamburger-box"><span class="hamburger-inner"></span></span></div></a><div class="sidebar-toggle sidebar-overlay"></div><aside class="sidebar"><script src="/task/js/sidebar.js"></script><ul class="sidebar-nav"><li class="sidebar-nav-item sidebar-nav-toc hty-icon-button sidebar-nav-active" data-target="post-toc-wrap" title="文章目录"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-list-ordered"></use></svg></li><li class="sidebar-nav-item sidebar-nav-overview hty-icon-button" data-target="site-overview-wrap" title="站点概览"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-passport-line"></use></svg></li></ul><div class="sidebar-panel" id="site-overview-wrap"><div class="site-info fix-top"><a class="site-author-avatar" href="/task/about/" title="爱肖彤真是太好了"><img width="96" loading="lazy" src="/task/Yun.png" alt="爱肖彤真是太好了"></a><div class="site-author-name"><a href="/task/about/">爱肖彤真是太好了</a></div><a class="site-name" href="/task/about/site.html">工藤旧二の博客</a><sub class="site-subtitle"></sub><div class="site-desciption"></div></div><nav class="site-state"><a class="site-state-item hty-icon-button icon-home" href="/task/" title="首页"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-home-4-line"></use></svg></span></a><div class="site-state-item"><a href="/task/archives/" title="归档"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-archive-line"></use></svg></span><span class="site-state-item-count">57</span></a></div><div class="site-state-item"><a href="/task/categories/" title="分类"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-folder-2-line"></use></svg></span><span class="site-state-item-count">2</span></a></div><div class="site-state-item"><a href="/task/tags/" title="标签"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-price-tag-3-line"></use></svg></span><span class="site-state-item-count">50</span></a></div><a class="site-state-item hty-icon-button" target="_blank" rel="noopener" href="https://yun.yunyoujun.cn" title="文档"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-settings-line"></use></svg></span></a></nav><hr style="margin-bottom:0.5rem"><div class="links-of-author"><a class="links-of-author-item hty-icon-button" rel="noopener" title="RSS" target="_blank" style="color:orange"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-rss-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="QQ" target="_blank" style="color:#12B7F5"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-qq-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="GitHub" target="_blank" style="color:#6e5494"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-github-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="微博" target="_blank" style="color:#E6162D"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-weibo-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="豆瓣" target="_blank" style="color:#007722"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-douban-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://music.163.com/#/user/home?id=552858287" title="网易云音乐" target="_blank" style="color:#C20C0C"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-netease-cloud-music-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="知乎" target="_blank" style="color:#0084FF"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhihu-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://space.bilibili.com/15081363" title="哔哩哔哩" target="_blank" style="color:#FF8EB3"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bilibili-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="Twitter" target="_blank" style="color:#1da1f2"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-twitter-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="Telegram Channel" target="_blank" style="color:#0088CC"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-telegram-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="E-Mail" target="_blank" style="color:#8E71C1"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-mail-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="Travelling" target="_blank" style="color:var(--hty-text-color)"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-send-plane-2-line"></use></svg></a></div><hr style="margin:0.5rem 1rem"><div class="links"><a class="links-item hty-icon-button" href="/task/links/" title="我的小伙伴们" style="color:dodgerblue"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-genderless-line"></use></svg></a></div><br><a class="links-item hty-icon-button" id="toggle-mode-btn" href="javascript:;" title="Mode" style="color: #f1cb64"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-contrast-2-line"></use></svg></a></div><div class="sidebar-panel sidebar-panel-active" id="post-toc-wrap"><div class="post-toc"><div class="post-toc-content"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%BB%8D"><span class="toc-text">1 基本介绍</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-text">2 基本使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-1-%E5%A6%82%E4%BD%95%E9%85%8D%E7%BD%AE%E8%87%AA%E5%8A%A8%E7%BC%96%E8%AF%91"><span class="toc-text">2.1 如何配置自动编译</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-text">3 数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-1-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E5%AE%9A%E4%B9%89"><span class="toc-text">3.1 数据类型定义</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-%E6%95%B0%E5%AD%97%E7%B1%BB%E5%9E%8B-number"><span class="toc-text">3.2 数字类型(number)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-%E5%AD%97%E7%AC%A6%E7%B1%BB%E5%9E%8B%EF%BC%88string%EF%BC%89"><span class="toc-text">3.3 字符类型（string）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-4-%E6%95%B0%E7%BB%84%E7%B1%BB%E5%9E%8B%EF%BC%88array%EF%BC%89"><span class="toc-text">3.4 数组类型（array）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-5-%E5%85%83%E7%BB%84%E7%B1%BB%E5%9E%8B%EF%BC%88tuple%EF%BC%89"><span class="toc-text">3.5 元组类型（tuple）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-6-%E6%9E%9A%E4%B8%BE%E7%B1%BB%E5%9E%8B%EF%BC%88enum%EF%BC%89"><span class="toc-text">3.6 枚举类型（enum）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-7-%E4%BB%BB%E6%84%8F%E7%B1%BB%E5%9E%8B%EF%BC%88any%EF%BC%89"><span class="toc-text">3.7 任意类型（any）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-8-%E5%85%B6%E4%BB%96%E7%B1%BB%E5%9E%8B%EF%BC%88never%E7%B1%BB%E5%9E%8B%EF%BC%89%E7%9A%84%E5%AD%90%E7%B1%BB%E5%9E%8B"><span class="toc-text">3.8 其他类型（never类型）的子类型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-9-void%E8%A1%A8%E7%A4%BA%E6%B2%A1%E6%9C%89%E4%BB%BB%E4%BD%95%E7%B1%BB%E5%9E%8B"><span class="toc-text">3.9 void表示没有任何类型</span></a></li></ol></li></ol></div></div></div></aside><main class="sidebar-translate" id="content"><div id="post"><article class="post-block" itemscope itemtype="https://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://huang_zhao.gitee.io/task/task/2020/09/13/%E5%89%8D%E7%AB%AF/Typescript%E5%85%A5%E9%97%A8%EF%BC%8C%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/"><span hidden itemprop="author" itemscope itemtype="https://schema.org/Person"><meta itemprop="name" content="爱肖彤真是太好了"><meta itemprop="description"></span><span hidden itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><meta itemprop="name" content="工藤旧二の博客"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">Typescript入门，基本数据类型</h1><div class="post-meta"><div class="post-time" style="display:block"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-calendar-line"></use></svg></span> <time title="创建时间：2020-09-13 22:47:11" itemprop="dateCreated datePublished" datetime="2020-09-13T22:47:11+08:00">2020-09-13</time><span class="post-meta-divider">-</span><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-calendar-2-line"></use></svg></span> <time title="修改时间：2020-09-14 21:59:43" itemprop="dateModified" datetime="2020-09-14T21:59:43+08:00">2020-09-14</time></div><span class="post-count"><span class="post-symbolcount"><span class="post-meta-item-icon" title="本文字数"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-file-word-line"></use></svg></span> <span title="本文字数">887</span><span class="post-meta-divider">-</span><span class="post-meta-item-icon" title="阅读时长"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-timer-line"></use></svg></span> <span title="阅读时长">3m</span></span></span><span class="post-busuanzi"><span class="post-meta-divider">-</span><span class="post-meta-item-icon" title="阅读次数"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-eye-line"></use></svg> <span id="busuanzi_value_page_pv"></span></span></span><div class="post-classify"><span class="post-category"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-folder-line"></use></svg></span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a class="category" href="/task/categories/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/" style="--text-color:var(--hty-text-color)" itemprop="url" rel="index"><span itemprop="text">技术分享</span></a></span></span><span class="post-tag"><span class="post-meta-divider">-</span><a class="tag" href="/task/tags/%E5%89%8D%E7%AB%AF/" style="--text-color:var(--hty-text-color)"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-price-tag-3-line"></use></svg></span><span class="tag-name">前端</span></a><a class="tag" href="/task/tags/ts/" style="--text-color:var(--hty-text-color)"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-price-tag-3-line"></use></svg></span><span class="tag-name">ts</span></a><a class="tag" href="/task/tags/ts%E5%9F%BA%E7%A1%80/" style="--text-color:var(--hty-text-color)"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-price-tag-3-line"></use></svg></span><span class="tag-name">ts基础</span></a></span></div></div></header><section class="post-body" itemprop="articleBody"><div class="post-content markdown-body" style="--smc-primary:#0078E7;"><h3 id="1-基本介绍"><a href="#1-基本介绍" class="headerlink" title="1 基本介绍"></a>1 基本介绍</h3><p>ts是js的超集，是目前前端必备的基础，包含了es5，es6的语法</p>
<p>也可以集成到vue中</p>
<p>安装：cnpm install -g typescript</p>
<p>查看版本：tsc -v</p>
<p>语言类型：静态弱类型</p>
<p>无法直接在浏览器运行，需要编译成js代码</p>
<h3 id="2-基本使用"><a href="#2-基本使用" class="headerlink" title="2 基本使用"></a>2 基本使用</h3><h4 id="2-1-如何配置自动编译"><a href="#2-1-如何配置自动编译" class="headerlink" title="2.1 如何配置自动编译"></a>2.1 如何配置自动编译</h4><p>使用idev：vscode</p>
<p>在vscode中在项目下cmd窗口输入<code>tsc --init</code>就会自动生成一个.json的配置文件</p>
<p>修改配置文件中</p>
<pre class=" language-ts"><code class="language-ts"><span class="token comment" spellcheck="true">// 默认是注释的解开注释即可</span>
<span class="token string">"outDir"</span><span class="token punctuation">:</span> <span class="token string">"./js"</span>
<span class="token comment" spellcheck="true">// 会把编译完成的ts代码放到js目录下的文件中</span></code></pre>
<p>然后点击终端–typescript–监视配置文件</p>
<p>如果报错9成是因为tsc权限不足</p>
<p>解决方式：以管理员方式打开cmd</p>
<p>输入<code>set-ExecutionPolicy RemoteSigned</code></p>
<p>再输入A或者Y即可</p>
<h3 id="3-数据类型"><a href="#3-数据类型" class="headerlink" title="3 数据类型"></a>3 数据类型</h3><h4 id="3-1-数据类型定义"><a href="#3-1-数据类型定义" class="headerlink" title="3.1 数据类型定义"></a>3.1 数据类型定义</h4><pre class=" language-ts"><code class="language-ts"><span class="token comment" spellcheck="true">// 布尔类型 boolean</span>
<span class="token keyword">let</span> boo<span class="token punctuation">:</span><span class="token keyword">boolean</span> <span class="token operator">=</span> <span class="token keyword">true</span>

<span class="token comment" spellcheck="true">// let关键字 变量名:变量类型 = 值</span></code></pre>
<h4 id="3-2-数字类型-number"><a href="#3-2-数字类型-number" class="headerlink" title="3.2 数字类型(number)"></a>3.2 数字类型(number)</h4><pre class=" language-ts"><code class="language-ts"><span class="token keyword">let</span> num<span class="token punctuation">:</span><span class="token keyword">number</span> <span class="token operator">=</span> <span class="token number">123</span>
<span class="token keyword">let</span> num<span class="token punctuation">:</span><span class="token keyword">number</span> <span class="token operator">=</span> <span class="token number">123.3</span>

<span class="token comment" spellcheck="true">// 数值类型包括整形和浮点型</span></code></pre>
<h4 id="3-3-字符类型（string）"><a href="#3-3-字符类型（string）" class="headerlink" title="3.3 字符类型（string）"></a>3.3 字符类型（string）</h4><pre class=" language-ts"><code class="language-ts"><span class="token keyword">let</span> str<span class="token punctuation">:</span><span class="token keyword">string</span> <span class="token operator">=</span> <span class="token string">"hz"</span></code></pre>
<h4 id="3-4-数组类型（array）"><a href="#3-4-数组类型（array）" class="headerlink" title="3.4 数组类型（array）"></a>3.4 数组类型（array）</h4><pre class=" language-ts"><code class="language-ts"><span class="token comment" spellcheck="true">// 数组在定义的时候必须指定内部的类型</span>
<span class="token comment" spellcheck="true">// 第一种定义方式</span>
<span class="token keyword">let</span> test_arry1<span class="token punctuation">:</span><span class="token keyword">number</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">456</span><span class="token punctuation">]</span>
<span class="token keyword">let</span> test_arry2<span class="token punctuation">:</span><span class="token keyword">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"hz"</span><span class="token punctuation">,</span><span class="token string">"lxt"</span><span class="token punctuation">]</span> <span class="token comment" spellcheck="true">// 推荐用双引号</span>

<span class="token comment" spellcheck="true">// 第二种定义方式</span>
<span class="token keyword">let</span> test_arry3<span class="token punctuation">:</span><span class="token keyword">Array</span><span class="token operator">&lt;</span><span class="token keyword">number</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span>

<span class="token comment" spellcheck="true">// 第三种定义方式</span>
<span class="token comment" spellcheck="true">// 通过any类型就可以放任意类型</span>
<span class="token keyword">let</span> arr<span class="token punctuation">:</span><span class="token keyword">any</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'123'</span><span class="token punctuation">,</span><span class="token number">123</span><span class="token punctuation">,</span><span class="token keyword">true</span><span class="token punctuation">]</span></code></pre>
<h4 id="3-5-元组类型（tuple）"><a href="#3-5-元组类型（tuple）" class="headerlink" title="3.5 元组类型（tuple）"></a>3.5 元组类型（tuple）</h4><pre class=" language-ts"><code class="language-ts"><span class="token comment" spellcheck="true">// 可以定义内部类型的数组，必须一一对应</span>
<span class="token comment" spellcheck="true">// 元组类型（数组的一种）</span>
<span class="token keyword">let</span> test_arry4<span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token keyword">number</span><span class="token punctuation">,</span><span class="token keyword">string</span><span class="token punctuation">,</span><span class="token keyword">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">"hz"</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">"hz"</span><span class="token punctuation">,</span><span class="token string">"nb"</span><span class="token punctuation">]</span><span class="token punctuation">]</span></code></pre>
<h4 id="3-6-枚举类型（enum）"><a href="#3-6-枚举类型（enum）" class="headerlink" title="3.6 枚举类型（enum）"></a>3.6 枚举类型（enum）</h4><pre class=" language-ts"><code class="language-ts"><span class="token comment" spellcheck="true">// 枚举类型，相当于创建一种新的类型，通过标识符和数值的对应来表示值类</span>
<span class="token comment" spellcheck="true">// 用于标识一种状态</span>
<span class="token keyword">enum</span> Flag <span class="token punctuation">{</span>success<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">,</span>error<span class="token operator">=</span><span class="token number">2</span><span class="token punctuation">}</span>
<span class="token keyword">var</span> f<span class="token punctuation">:</span>Flag <span class="token operator">=</span> Flag<span class="token punctuation">.</span>success 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>f<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// 1</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Flag<span class="token punctuation">.</span>error<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//2 </span>

<span class="token comment" spellcheck="true">// 如果枚举类型没有定义值，打印的就是索引值</span>
<span class="token keyword">enum</span> Color <span class="token punctuation">{</span>red<span class="token punctuation">,</span>blue<span class="token operator">=</span><span class="token number">5</span><span class="token punctuation">,</span>green<span class="token punctuation">}</span>
<span class="token keyword">var</span> c<span class="token punctuation">:</span>Color <span class="token operator">=</span> Color<span class="token punctuation">.</span>red
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// 0</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Color<span class="token punctuation">.</span>blue<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// 5</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Color<span class="token punctuation">.</span>green<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// 6 如果上一个对应值不是索引，就会按照上一个值递增1</span></code></pre>
<h4 id="3-7-任意类型（any）"><a href="#3-7-任意类型（any）" class="headerlink" title="3.7 任意类型（any）"></a>3.7 任意类型（any）</h4><pre class=" language-ts"><code class="language-ts"><span class="token comment" spellcheck="true">// 任意类型 any</span>
<span class="token keyword">let</span> data<span class="token punctuation">:</span><span class="token keyword">any</span> <span class="token operator">=</span> <span class="token number">123</span>

data <span class="token operator">=</span> <span class="token string">'123'</span>

<span class="token comment" spellcheck="true">// 任意类型的用途</span>
<span class="token comment" spellcheck="true">// 当我们需要用变量接受一个对象时，js中是可以直接接受</span>
<span class="token comment" spellcheck="true">// 必须指定any</span>
<span class="token keyword">let</span> oBox<span class="token punctuation">:</span><span class="token keyword">any</span> <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'box'</span><span class="token punctuation">)</span>
oBox<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'red'</span></code></pre>
<h4 id="3-8-其他类型（never类型）的子类型"><a href="#3-8-其他类型（never类型）的子类型" class="headerlink" title="3.8 其他类型（never类型）的子类型"></a>3.8 其他类型（never类型）的子类型</h4><p>代表从不会出现的值</p>
<p>以为这never类型的变量只能被类型所赋值</p>
<pre class=" language-ts"><code class="language-ts"><span class="token comment" spellcheck="true">// 其他类型（never类型）的子类型</span>
<span class="token comment" spellcheck="true">//undefined</span>
<span class="token comment" spellcheck="true">// num此时只能被赋值undefined</span>
<span class="token keyword">var</span> num<span class="token punctuation">:</span>undefined
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span>

<span class="token comment" spellcheck="true">// 如果被赋值就是number类型，没赋值就是undefined类型</span>
<span class="token keyword">var</span> num<span class="token punctuation">:</span><span class="token keyword">number</span> <span class="token operator">|</span> undefined
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span>

<span class="token comment" spellcheck="true">// null</span>
<span class="token comment" spellcheck="true">// undefined可以不赋值是因为他不仅可以作为类型，也可以作为值，而null不一样，如果要定义null类型就必须赋值null值</span>
<span class="token keyword">var</span> num1<span class="token punctuation">:</span><span class="token keyword">null</span> <span class="token operator">=</span> <span class="token keyword">null</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num1<span class="token punctuation">)</span>

<span class="token comment" spellcheck="true">// 综合运用</span>
<span class="token comment" spellcheck="true">// 如果我们对一个值的类型不能确定，不仅可以用any，也可以用|分隔可能出现的类型</span>
<span class="token keyword">let</span> num<span class="token punctuation">:</span><span class="token keyword">number</span> <span class="token operator">|</span> <span class="token keyword">null</span> <span class="token operator">|</span> undefined
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// undefined</span>
num <span class="token operator">=</span> <span class="token keyword">null</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token comment" spellcheck="true">// null</span>
num <span class="token operator">=</span> <span class="token number">123</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// 123</span>
</code></pre>
<h4 id="3-9-void表示没有任何类型"><a href="#3-9-void表示没有任何类型" class="headerlink" title="3.9 void表示没有任何类型"></a>3.9 void表示没有任何类型</h4><p>一般用于定义方法的时候没有任何返回值</p>
<pre class=" language-ts"><code class="language-ts"><span class="token comment" spellcheck="true">// 表示这个方法没有返回值</span>
<span class="token keyword">function</span> <span class="token function">run1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span><span class="token keyword">void</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'456'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">run1</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment" spellcheck="true">// 如果一个方法有返回值，就指定返回值类型</span>
<span class="token keyword">function</span> <span class="token function">run1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span><span class="token keyword">number</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token number">123</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">run1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre>
</div><div id="reward-container"><span class="hty-icon-button button-glow" id="reward-button" title="打赏" onclick="var qr = document.getElementById(&quot;qr&quot;); qr.style.display = (qr.style.display === &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;;"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-hand-coin-line"></use></svg></span><div id="reward-comment">点我就给你看点有意思的</div><div id="qr" style="display:none;"><div style="display:inline-block"><a target="_blank" rel="noopener" href="https://gitee.com/huang_zhao/hz/raw/master/hz/alipay.png"><img loading="lazy" src="https://gitee.com/huang_zhao/hz/raw/master/hz/alipay.png" alt="支付宝" title="支付宝"></a><div><span style="color:#00A3EE"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-alipay-line"></use></svg></span></div></div><div style="display:inline-block"><a target="_blank" rel="noopener" href="https://gitee.com/huang_zhao/hz/raw/master/hz/qqpay.jpg"><img loading="lazy" src="https://gitee.com/huang_zhao/hz/raw/master/hz/qqpay.jpg" alt="QQ 支付" title="QQ 支付"></a><div><span style="color:#12B7F5"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-qq-line"></use></svg></span></div></div><div style="display:inline-block"><a target="_blank" rel="noopener" href="https://gitee.com/huang_zhao/hz/raw/master/hz/wxpay.jpg"><img loading="lazy" src="https://gitee.com/huang_zhao/hz/raw/master/hz/wxpay.jpg" alt="微信支付" title="微信支付"></a><div><span style="color:#2DC100"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-wechat-pay-line"></use></svg></span></div></div></div></div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>爱肖彤真是太好了</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="http://huang_zhao.gitee.io/task/2020/09/13/%E5%89%8D%E7%AB%AF/Typescript%E5%85%A5%E9%97%A8%EF%BC%8C%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/" title="Typescript入门，基本数据类型">http://huang_zhao.gitee.io/task/2020/09/13/%E5%89%8D%E7%AB%AF/Typescript%E5%85%A5%E9%97%A8%EF%BC%8C%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/</a></li><li class="post-copyright-license"><strong>版权声明：</strong>本博客所有文章除特别声明外，均默认采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" title="CC BY-NC-SA 4.0 "><svg class="icon"><use xlink:href="#icon-creative-commons-line"></use></svg><svg class="icon"><use xlink:href="#icon-creative-commons-by-line"></use></svg><svg class="icon"><use xlink:href="#icon-creative-commons-nc-line"></use></svg><svg class="icon"><use xlink:href="#icon-creative-commons-sa-line"></use></svg></a> 许可协议。</li></ul></section></article><div class="post-nav"><div class="post-nav-item"><a class="post-nav-prev" href="/task/2020/09/14/%E5%89%8D%E7%AB%AF/es5%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%EF%BC%88ts%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E5%89%8D%E6%8F%90%E6%89%A9%E5%B1%95%EF%BC%89/" rel="prev" title="es5面向对象（ts面向对象前提扩展）"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-arrow-left-s-line"></use></svg><span class="post-nav-text">es5面向对象（ts面向对象前提扩展）</span></a></div><div class="post-nav-item"><a class="post-nav-next" href="/task/2020/09/13/%E5%89%8D%E7%AB%AF/HTTP%E5%8D%8F%E8%AE%AE%E6%9F%A5%E6%BC%8F%E8%A1%A5%E7%BC%BA/" rel="next" title="HTTP协议查漏补缺"><span class="post-nav-text">HTTP协议查漏补缺</span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-arrow-right-s-line"></use></svg></a></div></div></div></main><footer class="sidebar-translate" id="footer"><div class="copyright"><span>&copy; 2019 – 2022 </span><span class="with-love" id="animate"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-cloud-line"></use></svg></span><span class="author"> 爱肖彤真是太好了</span></div><div class="powered"><span>由 <a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> 驱动 v5.1.1</span><span class="footer-separator">|</span><span>主题 - <a rel="noopener" href="https://github.com/YunYouJun/hexo-theme-yun" target="_blank"><span>Yun</span></a> v0.9.7</span></div><div class="live_time"><span>本博客已萌萌哒地运行</span><span id="display_live_time"></span><span class="moe-text">(●'◡'●)</span><script>function blog_live_time() {
  window.setTimeout(blog_live_time, 1000);
  const start = new Date('2019-04-12T00:00:00');
  const now = new Date();
  const timeDiff = (now.getTime() - start.getTime());
  const msPerMinute = 60 * 1000;
  const msPerHour = 60 * msPerMinute;
  const msPerDay = 24 * msPerHour;
  const passDay = Math.floor(timeDiff / msPerDay);
  const passHour = Math.floor((timeDiff % msPerDay) / 60 / 60 / 1000);
  const passMinute = Math.floor((timeDiff % msPerHour) / 60 / 1000);
  const passSecond = Math.floor((timeDiff % msPerMinute) / 1000);
  display_live_time.innerHTML = " " + passDay + " 天 " + passHour + " 小时 " + passMinute + " 分 " + passSecond + " 秒";
}
blog_live_time();
</script></div><div id="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_site_uv" title="总访客量"><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-user-line"></use></svg></span><span id="busuanzi_value_site_uv"></span></span><span class="footer-separator">|</span><span id="busuanzi_container_site_pv" title="总访问量"><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-eye-line"></use></svg></span><span id="busuanzi_value_site_pv"></span></span></div></footer><a class="hty-icon-button" id="goUp" aria-label="back-to-top" href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-arrow-up-s-line"></use></svg><svg class="progress-circle-container" viewBox="0 0 100 100"><circle class="progress-circle" id="progressCircle" cx="50" cy="50" r="48" fill="none" stroke="#0078E7" stroke-width="2" stroke-linecap="round"></circle></svg></a><a class="popup-trigger hty-icon-button icon-search" id="search" href="javascript:;" title="搜索"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-search-line"></use></svg></span></a><script>window.addEventListener("DOMContentLoaded", () => {
  // Handle and trigger popup window
  document.querySelector(".popup-trigger").addEventListener("click", () => {
    document.querySelector(".popup").classList.add("show");
    setTimeout(() => {
      document.querySelector(".search-input").focus();
    }, 100);
  });

  // Monitor main search box
  const onPopupClose = () => {
    document.querySelector(".popup").classList.remove("show");
  };

  document.querySelector(".popup-btn-close").addEventListener("click", () => {
    onPopupClose();
  });

  window.addEventListener("keyup", event => {
    if (event.key === "Escape") {
      onPopupClose();
    }
  });
});
</script><script src="/task/js/search/local-search.js" defer></script><div class="popup search-popup"><div class="search-header"><span class="popup-btn-close close-icon hty-icon-button"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-close-line"></use></svg></span></div><div class="search-input-container"><input class="search-input" id="local-search-input" type="text" placeholder="搜索..." value=""></div><div id="local-search-result"></div></div></div><script defer src="/task/js/utils.js"></script><script defer src="/task/js/hexo-theme-yun.js"></script></body></html>